import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { AccountModel } from '#/api/system/models';

import { isUndefined } from '@vben/utils';

import { getOrgListApi } from '#/api/system/org';
import { getPosListApi } from '#/api/system/pos';
import { toTree } from '#/utils';

/**
 * 获取表格查询表单的字段配置。
 */
export function useSearchSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
      },
      fieldName: 'username',
      label: '账号',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
      },
      fieldName: 'realname',
      label: '姓名',
    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
        allowClear: true,
        treeNodeFilterProp: 'label',
        treeLine: true,
        labelField: 'name',
        valueField: 'id',
        childrenField: 'children',
        afterFetch: (data: any) => {
          return toTree(data);
        },
        api: getOrgListApi,
      },
      fieldName: 'orgId',
      label: '部门',
    },
  ];
}

/**
 * 获取编辑表单的字段配置。
 */
export function useSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      dependencies: {
        disabled(values) {
          return !isUndefined(values.id);
        },
        triggerFields: ['username'],
      },
      fieldName: 'username',
      label: '账号',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'realname',
      label: '姓名',
      rules: 'required',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          { label: '未知', value: 0 },
          { label: '男', value: 1 },
          { label: '女', value: 2 },
        ],
      },
      fieldName: 'gender',
      label: '性别',
      defaultValue: 1,
    },
    {
      component: 'Input',
      fieldName: 'phone',
      label: '手机号码',
    },
    {
      component: 'Input',
      fieldName: 'email',
      label: '邮件',
    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
        allowClear: true,
        treeNodeFilterProp: 'label',
        treeLine: true,
        labelField: 'name',
        valueField: 'id',
        childrenField: 'children',
        afterFetch: (data: any) => {
          return toTree(data);
        },
        api: getOrgListApi,
      },
      fieldName: 'orgId',
      label: '所属部门',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        allowClear: true,
        labelField: 'name',
        valueField: 'id',
        api: getPosListApi,
      },
      fieldName: 'posId',
      label: '职位',
    },
    {
      component: 'Input',
      fieldName: 'jobNum',
      label: '工号',
    },
    {
      component: 'Input',
      fieldName: 'posLevel',
      label: '职级',
    },
    {
      component: 'DatePicker',
      componentProps: {
        valueFormat: 'YYYY-MM-DD', // 若不指定则需要 dayjs 处理
      },
      fieldName: 'serviceDate',
      label: '入职日期',
    },
    {
      component: 'Switch',
      componentProps: {
        checkedValue: 1,
        unCheckedValue: 0,
        checkedChildren: '启用',
        unCheckedChildren: '禁用',
        class: 'w-auto',
      },
      fieldName: 'status',
      label: '状态',
      defaultValue: 1,
    },
    {
      component: 'Textarea',
      componentProps: {
        showCount: true,
        maxlength: 128,
      },
      fieldName: 'remark',
      label: '备注',
      formItemClass: 'col-span-2 items-baseline',
    },
  ];
}

/**
 * 获取表格列配置。
 * @param onActionClick 表格操作按钮点击事件
 */
export function useColumns(
  onActionClick?: OnActionClickFn<AccountModel>,
): VxeTableGridOptions<AccountModel>['columns'] {
  return [
    { title: '序号', type: 'seq', width: 60 },
    { field: 'username', title: '账号', width: 140 },
    { field: 'realname', title: '姓名', width: 140 },
    { field: 'org.name', title: '所属机构', width: 140 },
    { field: 'pos.name', title: '职位', width: 140 },
    {
      field: 'roles',
      title: '角色',
      minWidth: 180,
      slots: { default: 'roles' },
    },
    {
      field: 'status',
      title: '状态',
      width: 100,
      cellRender: { name: 'CellTag', attrs: { useStatus: true } },
    },
    { field: 'createdTime', title: '创建日期', width: 160 },
    {
      cellRender: {
        attrs: {
          nameField: 'username',
          nameTitle: '账号',
          onClick: onActionClick,
        },
        name: 'CellOperation',
        options: [{ code: 'grant', text: '分配角色' }, 'edit', 'delete'],
      },
      field: 'operation',
      fixed: 'right',
      title: '操作',
      width: 180,
    },
  ];
}
